<template>
  <div class='my'>
    <div class="top">
      <div class="div" v-if="!show">
<!--        123-->
        <div class="img">
          <img src="/to.png" @click="gotoLogin" alt="">
        </div>
        <p @click="gotoLogin">登录/注册</p>
      </div>
      <div class="hh" v-else @click="$router.push('/info')">
        <div class="header-img">
          <img class="avatar" :src="userData.avatar" alt="">
        </div>
        <p>{{ userData.nickname }}</p>
        <p class="sing" @click.stop="sing">
          <img src="../../assets/img/download.png" alt="">
          <span>签到</span>
        </p>
      </div>
      <div class="div1">
        <div>
          <p class="p1">{{ num }}</p>
          <p>我的学习</p>
        </div>
        <div>
          <p class="p2">{{ num }}</p>
          <p>本周课时</p>
        </div>
        <div>
          <p class="p3">{{ num }}</p>
          <p>我的积分</p>
        </div>
      </div>
    </div>
    <div class="tasks">
      <myTask>
        <div style="width: 100%;text-align: left" @click="goOptions('Homework')"><span class="iconfont icon-zuoye"> <span>我的作业</span></span></div>
      </myTask>
      <myTask>
        <div style="width: 100%;text-align: left" @click="goOptions('My-community')"><span class="iconfont icon-pengyouquan"> <span>我的社区</span></span></div>
      </myTask>
    </div>
    <div class="tasks">
      <myTask>
        <div style="width: 100%;text-align: left" @click="goOptions('order')"><span class="iconfont icon-dingdan  "> <span>课程订单</span></span></div>
      </myTask>
      <myTask>
        <div style="width: 100%;text-align: left" @click="goOptions('order')"><span class="iconfont icon-tushu"> <span>图书订单</span></span></div>
      </myTask>
    </div>
    <div class="tasks">
      <myTask>
        <div style="width: 100%;text-align: left" @click="goOptions('coupon')"><span class="iconfont icon-wodeyouhuiquan"> <span>优惠券</span></span></div>
      </myTask>
      <myTask>
        <div style="width: 100%;text-align: left" @click="goOptions('card')"><span class="iconfont icon-xuexika"> <span>学习卡</span></span></div>
      </myTask>
      <myTask>
        <div style="width: 100%;text-align: left" @click="goOptions('distribute')"><span class="iconfont icon-xuexika"> <span>分销中心</span></span></div>
      </myTask>
    </div>
    <div class="tasks taskall">
      <myTask>
        <div style="width: 100%;text-align: left" @click="goOptions('message')"><span class="iconfont icon-xinxi"> <span>消息中心</span></span></div>
      </myTask>
      <myTask>
        <div style="width: 100%;text-align: left" @click="goOptions('ClassAdddizhi')"><span class="iconfont icon-ditu"> <span>地址管理</span></span></div>
      </myTask>
      <myTask>
        <div style="width: 100%;text-align: left" @click="goOptions('about')"><span class="iconfont icon-user"> <span>关于我们</span></span></div>
      </myTask>
      <myTask>
        <div style="width: 100%;text-align: left" @click="goOptions('feedback')"><span class="iconfont icon-xiaofeiji"> <span>意见反馈</span></span></div>
      </myTask>
      <myTask>
        <div style="width: 100%;text-align: left" @click="goOptions('options')"><span class="iconfont icon-shezhi" > <span>设置</span></span></div>
      </myTask>
    </div>
  </div>
</template>

<script>
import myTask from '@/components/my/myTask'
import {getInfo} from "@/utils/api";

export default {
  data() {
    return {
      num: 0,
      userData: [],
      show:false
    };
  },
  created() {
    // console.log(this.$store.state.token)
    let token = localStorage.getItem("adminToken") || ''
    if(token === ''){
      this.show = false
    }else {
      this.show = true
    }
    getInfo().then(res=>{
      // console.log(res.data)
      this.userData = res.data
    })
    // console.log(this.userData)
  },
  components: {
    myTask
  },
  methods: {
    gotoLogin() {
      this.$router.push('/login')
    },
    goOptions(rout){
      this.$router.push('/'+rout+'').catch(err => (err))
    },
    sing(){
      this.$router.push('/sign')
    }
  },
}
</script>

<style lang='scss' scoped>
.my {
  background-color: #f7f8fa;
  width: 100%;
  height: 100%;
  padding-bottom: 60px;
}

.top {
  overflow: hidden;
  width: 100%;
  height: 300px;
  background-size: 100% !important;
  color: #fff;
  background-color: #fff !important;
  background: url(/my.png) no-repeat top;
  position: relative;

  .div {
    width: 100%;
    height: 200px;
    text-align: center;
    display: block;
    padding-top: 50px;

    .img {
      // padding-top: 2px;
      width: 63px;
      height: 63px;
      background-color: #becef1;
      //border: solid 1px #becef1;
      border-radius: 50%;
      //overflow: hidden;
      margin: 2px auto;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        padding: 2px;
        width: 63px;
        height: 63px;
        border-radius: 50%;
      }
    }

    p {
      font-size: 4.5666vw;
      margin-top: 3.7vw;
      font-weight: 500;
    }
  }

  .div1 {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;

    div {
      height: 55px;
      flex: 1;
      margin-bottom: 20px;
    }

    color: black;

    p {
      text-align: center;
      font-size: 14px;
      margin-bottom: 3px;
      color: #595959;
    }

    .p1 {
      font-size: 22px;
      color: #5bb8f5;
      height: 29px;
      font-weight: 500;
    }

    .p2 {
      font-size: 22px;
      color: #e60012;
      height: 29px;
      font-weight: 500;
    }

    .p3 {
      font-size: 22px;
      color: #e74d3d;
      height: 29px;
      font-weight: 500;
    }
  }
}

.tasks {
  margin-top: 15px;

  span {
    color: #595959;
    font-size: 14px;
    padding-left: 5px;
  }

  .iconfont {
    padding-left: 5px;
    color: #999;
  }
}

.hh {
  width: 375px;
  height: 63px;
  margin-top: 53px;
  display: flex;

  .header-img {
    margin: 0 25px 0 20px;
    width: 63px;
    height: 63px;
    background-color: #becef1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    .avatar {
      width: 63px;
      height: 63px;
      padding: 2px;
      border-radius: 50%;
    }
  }

  p {
    margin-top: 7.5px;
    font-weight: 500;
    font-size: 17px;
    color: #fafafa;
  }

  .sing {
    position: absolute;
    right: 0;
    top: 17%;
    width: 67.5px;
    height: 25px;
    background: linear-gradient(270deg, #6dbcff, #4e7de3);
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    display: flex;
    align-items: center;

    img {
      margin: 0 7px;
      width: 10px;
      height: 11px;
    }

    span {
      font-size: 12px;
      font-weight: 500;
    }
  }
}
</style>
